<script setup lang="ts">
import { ArticleVo, ArticleQuery } from "@/api/article/type";
import { Refresh, Search } from "@element-plus/icons-vue";
import { getArticlePageApi } from "@/api/article";
import { getCategoryOptionsApi } from "@/api/category";
import { getTagOptions } from "@/api/tag";

const router = useRouter();
// 查询参数信息
const queryParams = reactive<ArticleQuery>(<ArticleQuery>{
  pageNum: 1,
  pageSize: 10,
});
// 分类列表
const categoryList = ref<SelectBox[]>(<SelectBox[]>[]);
// 标签列表
const tagList = ref<SelectBox[]>(<SelectBox[]>[]);
// 查询框
const queryFormRef = ref(ElForm);

const ids = ref([]);
const total = ref(0);
const tableLoading = ref(false);
const dataList = ref(<ArticleVo[]>[]);

const getDataList = () => {
  tableLoading.value = true;
  getArticlePageApi(queryParams)
    .then(({ data: res }) => {
      dataList.value = res.data.records;
      total.value = res.data.total;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};

/**
 * 查询操作
 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getDataList();
};

const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
};

const handleDelete = () => {};
const handleRowDelete = (articleId?: number) => {};

const openDialog = (articleId?: number) => {};

/**
 * 选中项变更更
 * @param articleId
 */
const handleSelectionChange = (articleId: number) => {
  if (ids.value.find((i) => i == articleId)) {
    const idx = ids.value.findIndex((i) => i == articleId);
    ids.value.splice(idx, 1);
  } else {
    ids.value.push(articleId);
  }
};

/**
 * 添加按钮操作
 */
const handleAdd = () => {
  router.push("/article/edit");
};

/**
 * 更新按钮操作
 */
const handleUpdate = () => {
  if (ids.value.length === 1) {
    const id = ids.value[0];
    router.push({ path: "/article/edit", query: { articleId: id } });
  }
};

/**
 * 抓取数据
 */
const handleReptile = () => {};

/**
 * 查看数据
 */
const handleViewData = (articleId: number) => {};

/**
 * 更新行数据
 * @param articleId
 */
const handleRowUpdate = (articleId: number) => {
  router.push({ path: "/article/edit", query: { articleId: articleId } });
};

/**
 * 获取分类列表
 */
const getCategoryList = () => {
  // 获取分类列表
  getCategoryOptionsApi().then(({ data: res }) => {
    categoryList.value = res.data;
  });
};

/**
 * 获取标签列表
 */
const getTagList = () => {
  // 获取标签列表
  getTagOptions().then(({ data: res }) => {
    tagList.value = res.data;
  });
};

onMounted(() => {
  getCategoryList();
  getTagList();
  getDataList();
});
</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="文章名称" prop="title">
          <el-input
            style="width: 200px"
            v-model="queryParams.title"
            placeholder="菜单名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="分类" prop="categoryId">
          <el-select
            class="!w-[120px]"
            v-model="queryParams.categoryId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tagId">
          <el-select
            class="!w-[120px]"
            v-model="queryParams.tagId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in tagList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态" prop="isPush">
          <el-select
            class="!w-[120px]"
            v-model="queryParams.isPush"
            clearable
            placeholder="请选择"
          >
            <el-option label="已发布" :value="true" />
            <el-option label="未发布" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否原创" prop="isOriginal">
          <el-select
            class="!w-[120px]"
            v-model="queryParams.isOriginal"
            clearable
            placeholder="请选择"
          >
            <el-option label="原创" :value="true" />
            <el-option label="转载" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" type="primary" @click="handleQuery"
            >搜索</el-button
          >
          <el-button :icon="Refresh" @click="resetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never" class="table-container">
      <!-- 头部操作栏 -->
      <template #header>
        <el-button type="primary" plain @click="handleAdd"
          ><i-ep-plus />新增</el-button
        >
        <el-button
          type="success"
          plain
          :disabled="ids.length !== 1"
          @click="handleUpdate"
        >
          <i-ep-edit />修改
        </el-button>
        <el-button
          type="danger"
          plain
          :disabled="ids.length === 0"
          @click="handleDelete"
        >
          <i-ep-delete />
          删除
        </el-button>
        <el-button type="info" plain @click="handleReptile()">
          <i-ep-magnet />抓取</el-button
        >
      </template>
      <!-- 新版博客展示 -->
      <template #default>
        <ArticleEdit
          :data-list="dataList"
          :ids="ids"
          :tag-list="tagList"
          :category-list="categoryList"
          @handle-update="handleRowUpdate"
          @handle-delete="handleRowDelete"
          @handle-selection-change="handleSelectionChange"
          @handle-view-data="handleViewData"
        />
        <!-- 分页组件 -->
        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getDataList"
        />
      </template>
    </el-card>
  </div>
</template>

<style scoped lang="scss"></style>
